<template>
	<div id="search">

		<!-- 时间 -->
		<timehead></timehead>

		<van-row style="margin-top: 20px;">
			<van-col :span="1" :offset="1" class="searchicon">
				<back></back>
			</van-col>
			<van-col :span="18">
				<van-row class="search">
					<van-col :span="3" class="jumpsearchinputimgs">
						<img src="../../../public/images/首页@3x_07.jpg" class="jumpsearchinputimg">
					</van-col>
					<van-col :span="18" class="jumpsearchinputs">
						<input type="text" class="jumpsearchinput" ref="searchdata" placeholder="苹果电脑">
					</van-col>
					<van-col :span="3" class="jumpsearchicon">
						<i class="el-icon-camera"></i>
					</van-col>
				</van-row>
			</van-col>
			<van-col :span="4" class="jumpsearch" @click="search">搜索</van-col>
		</van-row>
		
		<van-row class="searchhot">
			热搜
		</van-row>
		<van-row class="searchhotones">
			<div class="searchhotone" v-for="(item,index) in hot" :key="index">
				{{item}}
			</div>
		</van-row>
		
		<van-row class="searchdatas">
			<van-col :span="12" v-for="item in searchlist">
				<van-image  width="98%" height="250px" lazy-load :src="url+item.original_img" class="searchimg"/>
				<van-row>
					<van-col :span="24" class="newname">{{item.goods_name}}</van-col>
				</van-row>
				<van-row>
					<van-col :span="24" class="newcontent">{{item.goods_name}}</van-col>
				</van-row>
				<van-row>
					<van-col :span="24" class="newprice"><span style="font-size: 1.125rem;">￥</span>{{item.shop_price}}</van-col>
				</van-row>
			</van-col>
		</van-row>
	</div>
</template>

<script>
	import timehead from '@/components/timehead.vue'
	import back from '@/components/back.vue'
	export default 
	{
		data() 
		{
			return {
				hot: [],
				searchdata: '',
				searchlist:[],
				url:'https://img.9lele.com'
			}
		},
		components: 
		{
			timehead,
			back
		},
		mounted()
		{
			if(JSON.parse(localStorage.getItem('hot')))
			{
				this.hot=JSON.parse(localStorage.getItem('hot'))
			}
			
		},
		methods: 
		{
			search() 
			{
				let value = this.$refs.searchdata.value;
				if(this.hot.indexOf(value)===-1)
				{
					this.hot.unshift(value)
					this.hot=this.hot.slice(0,10);
					localStorage.setItem('hot',JSON.stringify(this.hot))
					this.$refs.searchdata.value=''
				}
				else
				{
					this.hot.unshift(value)
					this.hot.map((v)=>
					{
						if(v==value)
						{
							console.log(this.hot,1111111111111)
							this.hot.splice(value,1)
							console.log(this.hot)
							this.$refs.searchdata.value=''
						}
					})
					// this.hot=this.hot.splice(0,10);
					// localStorage.setItem('hot',JSON.stringify(this.hot))
				}
			
				this.$nextTick(function()
				{
					this.$store.dispatch("picture/vuexSearch",value)
					.then(e=>
					{
						this.searchlist=e.data.data
					})
				})
			}
			
		}
	}
</script>

<style>
	#search {
		width: 100%;
		height: 100%;
		margin-top: 20px;
	}

	.search {
		width: 100%;
		height: 50px;
		border-radius: 5px;
		border: none;
		background-color: #ececec;
		outline: none;
		margin-left: 5%;
		border-radius: 50px;
	}

	.jumpsearchinputimg {
		width: 35px;
		height: 35px;
	}

	.jumpsearchinputimgs {
		padding-left: 2%;
		padding-top: 5px;
	}

	.jumpsearchinput {
		width: 100%;
		height: 48px;
		border: none;
		background-color: #ececec;
		float: left;
		padding-left: 2%;
		outline: none;
		color: #ccc;
	}

	.searchicon {
		font-size: 1.875rem;
		font-weight: bold;
		line-height: 50px;
	}

	.jumpsearch {
		font-size: 1.25rem;
		line-height: 50px;
		font-weight: bold;
	}

	.jumpsearchicon {
		color: #ccc;
		font-size: 1.875rem;
		line-height: 50px;
	}

	.searchhot {
		width: 95%;
		height: 40px;
		font-size: 1.5625rem;
		font-weight: bold;
		text-align: left;
		padding-left: 5%;
		line-height: 40px;
		margin-top: 20px;
	}

	.searchhotones {
		width: 95%;
		height: 100%;
		padding-left: 5%;
		text-align: left;
	}

	.searchhotone {
		height: 40px;
		border-radius: 50px;
		background-color: #f5f5f5;
		line-height: 40px;
		padding-left: 20px;
		padding-right: 20px;
		float: left;
		font-size: 0.9375rem;
		margin-right: 30px;
		margin-top: 10px;
	}
	.searchdatas{
		width: 100%;
		height: 100%;
		margin-top: 30px;
	}
</style>
